/**
* @author: LiYaHui
* @date: 2021-11-02
* @description: 弹出框
*/
<template>
  <transition
    enter-active-class="van-popup-slide-top-enter-active van-popup-slide-bottom-enter-active van-popup-slide-left-enter-active van-popup-slide-right-enter-active">
    <div v-if="value" class="dialog-wrap" @click="onClickModal" :style="{ zIndex }">
      <div :class="['dialog', `dialog-center`, className]" @click.stop :style="getStyle">
        <slot name="title">
          <div class="dialog-title">
            <h4 class="dialog-title-text">{{ title }}</h4>
          </div>
        </slot>
        <slot></slot>
        <slot name="footer"></slot>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 400
    },
    // 是否可以通过点击 modal 关闭 Dialog
    closeOnClickModal: {
      type: Boolean,
      default: true
    },
    offset: [Number, String],
    zIndex: {
      type: [Number, String],
      default: 998
    },
    className: String
  },
  data () {
    return {
      top: 0
    }
  },
  computed: {
    getStyle () {
      return {
        width: `${this.width}px`
      }
    }
  },
  methods: {
    onClickModal () {
      if (!this.closeOnClickModal) return false
      this.$emit('input', false)
      this.$emit('cancel')
    },
    onCancel () {
      this.$emit('input', false)
      this.$emit('cancel')
    },
    onConfirm () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="less" scoped>
  .dialog-wrap {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .dialog {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background-color: #F9F9F9;
    margin-top: 20%;
    margin-left: 50%;
    transform: translateX(-50%);

    .dialog-title {
      flex-shrink: 0;
      height: 50px;
      line-height: 50px;

      .dialog-title-text {
        font-size: 20px;
        font-weight: 500;
        color: #000;
        text-align: center;
      }

      .van-icon {
        position: absolute;
        width: 15px;
        height: 15px;
        line-height: 15px;
        right: 20px;
        top: 17px;
        color: #C8C9CC;
        text-align: center;
        font-size: 20px;
      }
    }

    .dialog-content {
      flex: 1;
      overflow-y: auto;
    }

    .dialog-footer {
      display: flex;
      flex-shrink: 0;
      padding: 16px 16px 0 16px;
      height: 80px;
    }
  }

</style>
